<template>
  <div class="mt-20">
    <LiveOverview title="核算列表" @refresh="handleCashSettlementList" />
    <Tabs :tabs="tabs" :currentKey="currentTab" @tab-click="changeTab" />

    <!-- 搜索表单 -->
    <SearchForm
      :form-option="formOption"
      :show-btn="true"
      :btn-list="btnList"
      v-model="formOption.data"
      label-width="90px"
    />

    <!-- 数据表格 -->
    <PageTable
      :loading="loading"
      :data="dataSource"
      :columns="columns"
      :options="options"
      @selectChange="selectChange"
    />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="handleCashSettlementList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'SettleTable',
  props: {
    value: {
      type: String
    },
  },
  data() {
    return {
      tabs: [
        { label: '待核算', num: '', key: 'noNum' },
        { label: '已核算', num: '', key: 'endNum' }
      ],

      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'daterange',
            label: '生成时间',
            value: 'time',
            valueFormat: 'yyyy-MM-dd'
          }
        ],
        data: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.handleCashSettlementList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.formOption.data = {}
            this.handleCashSettlementList()
          }
        },
        {
          type: 'primary',
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],

      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: false,
      // 表格配置
      options: {
        border: true,
        select: true
      },
      // 表格列
      columns: [
        { prop: 'id', label: 'ID' },
        { prop: 'month', label: '核算月份' },
        {
          width: '210px',
          prop: 'settlePeriod',
          type: 'custom',
          renderHeader: () => {
            return (
              <div>
                <span>核算周期</span>
                <el-tooltip popper-class="tooltip" placement="bottom-start" effect="light">
                  <i style="color: #399AFB" class="el-icon-question"></i>
                  <div slot="content" class="tooltip-content">
                    <div class="tooltip-content-top">
                      <div style="font-weight: bold">提示：</div>
                      <div style="padding-top: 5px;font-size: 16px">
                        结算周期是指上次提现时间到本次提现时间的周期，系统会自动将该周期内的账单进行汇总，以便进行财务做账。
                      </div>
                    </div>
                    <div class="tooltip-content-bottom">挖咖-让工程机械人生活更便捷。</div>
                  </div>
                </el-tooltip>
              </div>
            )
          },
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.startTime}</p>
                <p>至</p>
                <p>{row.endTime}</p>
              </div>
            )
          }
        },
        {
          prop: 'settleAmount',
          label: '核算金额',
          render: (h, { row }) => {
            return <div style="color:#409eff;">￥{row.settleAmount || 0}</div>
          }
        },
        {
          prop: 'settleNum',
          label: '订单笔数',
          render: (h, { row }) => {
            return <div style="color:#409eff;">{row.settleNum || 0}</div>
          }
        },
        {
          prop: 'supplierNum',
          label: '供应商数',
          render: (h, { row }) => {
            return <div style="color:#409eff;">{row.supplierNum || 0}</div>
          }
        },
        { prop: 'createdTime', label: '生成时间' },
        {
          prop: 'status',
          label: '结算状态',
          render: (h, { row }) => {
            const colorObj = {
              1: '#fc4560',
              2: '#333'
            }
            const textObj = {
              1: '待审核',
              2: '已结算'
            }
            return <div style={`color:${colorObj[row.status]}`}>{textObj[row.status]}</div>
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            const textObj = {
              1: '去结算',
              2: '查看账单'
            }
            return (
              <el-link underline={false} type="primary" onClick={() => this.toDetail(row)}>
                {textObj[row.status]}
              </el-link>
            )
          }
        }
      ],
      // 表格源数据
      dataSource: [],
      selectList: []
    }
  },
  computed: {
    // 当前激活tab
    currentTab: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  activated() {
    this.handleCashSettlementList()
    this.handleCashSettlementTabs()
  },
  created() {
    this.handleCashSettlementList()
    this.handleCashSettlementTabs()
  },
  methods: {
    // tab栏切换
    changeTab({ key }) {
      this.currentTab = key
      this.$nextTick(() => {
        this.handleCashSettlementList()
      })
    },

    // 获取待审核列表
    async handleCashSettlementList() {
      const { time } = this.formOption.data
      const params = {
        status: this.currentTab === 'noNum' ? 1 : 2,
        startDate: time && time[0],
        endDate: time && time[1],
        ...this.listQuery
      }
      const {
        data: { total, records }
      } = await this.$http.integral.cashSettlementApi.getCashSettlementList(params)
      this.total = total
      this.dataSource = records
    },
    //获取核算列表tab统计
    async handleCashSettlementTabs() {
      const { data } = await this.$http.integral.cashSettlementApi.getCashSettlementTabs()
      this.tabs = this.tabs.map(item => {
        for (const key in data) {
          if (key === item.key) {
            item.num = data[key]
          }
        }
        return item
      })
    },

    // 选择列
    selectChange(list) {
      this.selectList = list
    },

    // 点击操作
    toDetail(item) {
      this.$router.push({
        name: 'CashSettleBillDetail',
        query: {
          id: item.id,
        }
      })
    },
    // 导出部分
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据！')
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      const list = this.$lodash.cloneDeep(this.selectList)
      const tableData = list.map(item => {
        item.settlePeriod = `${item.startTime}至${item.endTime}`
        item.settleAmount = item.settleAmount || 0
        item.settleNum = item.settleNum || 0
        item.supplierNum = item.supplierNum || 0
        item.status = item.status === 1 ? '待审核' : '已结算'
        return item
      })
      let title = this.currentTab === 'noNum' ? '待审核' : '已结算'
      export2Excel(headerData, tableData, filterData, `现金结算单-${title}`, () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tooltip-content {
  //background-color: #FFFFFF;
  .tooltip-content-top {
    font-size: 18px;
    width: 300px;
    padding-bottom: 15px;
    border-bottom: 1px solid #bbbbbb;
  }

  .tooltip-content-bottom {
    padding-top: 10px;
    font-size: 14px;
  }
}
</style>
